<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/webjars/js/echarts.min.js"></script>
    <link rel="stylesheet" href="/webjars/css/layui.css">
    <script src="/webjars/layui.js"></script>
</head>
<body>
<div style="border: 1px solid bisque; width: 95vw; height: 15vh; margin: 20px 10px; line-height: 15vh; padding: 20px 10px;">
    <button class="layui-btn layui-btn-normal" data-type="clear" id="seven_day">七天走势</button>
    <button class="layui-btn layui-btn-normal" data-type="clear" id="one_month">一月走势</button>
    <button class="layui-btn layui-btn-normal" data-type="clear" id="half_year">半年走势</button>
    <button class="layui-btn layui-btn-normal" data-type="clear" id="one_year">一年走势</button>
</div>
</div>
<div id="main" style="border: 1px solid bisque; width: 95vw; height: 75vh; margin: 0 10px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.getElementById('main'));

    layui.use(['element', 'layer', 'jquery'], function () {
        let element = layui.element;
        let $ = layui.jquery;

        $('#seven_day').click(function () {
            setTrendECharsDate($, 7);
        });
        $('#one_month').click(function () {
            setTrendECharsDate($, 30);
        });
        $('#half_year').click(function () {
            setTrendECharsDate($, 180);
        });
        $('#one_year').click(function () {
            setTrendECharsDate($, 365);
        });
        $('#seven_day').trigger('click');
    });

    function setTrendECharsDate(jquery, limit) {
        jquery.ajax({
            url: '/api/lottery/history/modify/wave',
            type: 'get',
            data: {
                limit: limit
            },
            /*是否异步*/
            async: true,
            /*返回的数据类型*/
            dataType: "json",//返回数据类型
            /*这个值是默认的传参方式, 默认可以不指定, 只有传递json时需要指定*/
            contentType: 'application/x-www-form-urlencoded',
            success: function (response) {
                if (response.code === 200) {
                    option.legend.data = [];
                    option.xAxis.data = [];
                    option.series[0].data = [];
                    option.series[1].data = [];
                    option.series[2].data = [];
                    option.series[3].data = [];
                    option.series[4].data = [];
                    option.series[5].data = [];
                    option.series[6].data = [];

                    option.legend.data.push(...response.data.legendData);
                    option.xAxis.data.push(...response.data.xaxisData);
                    option.series[0].data.push(...response.data.redNum1ModifyArr);
                    option.series[1].data.push(...response.data.redNum2ModifyArr);
                    option.series[2].data.push(...response.data.redNum3ModifyArr);
                    option.series[3].data.push(...response.data.redNum4ModifyArr);
                    option.series[4].data.push(...response.data.redNum5ModifyArr);
                    option.series[5].data.push(...response.data.redNum6ModifyArr);
                    option.series[6].data.push(...response.data.blueNumModifyArr);
                    myChart.setOption(option);
                }
            }
        });
    }

    // 指定图表的配置项和数据
    let option = {
        title: {
            text: '彩票走势图'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '红球1',
                type: 'line',
                // 下面这个不注释的话将会进行求和操作
                //stack: '总量',
                data: []
            },
            {
                name: '红球2',
                type: 'line',
                //stack: '总量',
                data: []
            },
            {
                name: '红球3',
                type: 'line',
                //stack: '总量',
                data: []
            },
            {
                name: '红球4',
                type: 'line',
                //stack: '总量',
                data: []
            },
            {
                name: '红球5',
                type: 'line',
                //stack: '总量',
                data: []
            },
            {
                name: '红球6',
                type: 'line',
                //stack: '总量',
                data: []
            },
            {
                name: '篮球',
                type: 'line',
                //stack: '总量',
                data: []
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);
</script>
</body>
</html>